### alp-tree 树形组件使用方法

通过配置项生成树形结构

#### 引入方式

~~~ vue
<template>
    <alpTree
      :treeConfigs="treeConfigs"
      @refresh="refresh"
      @rightMenuFunction="rightMenuFunction"
      v-model:data="data"
      @change="change"
    />
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: ...,
    data() {
    	retrun {
            //树形配置
            treeConfigs: {
                treeData: [],
                filter: true,
                majorKey: "deptId",
                majorName: "deptName",
                width: 200,
                operation: true,
                rightMenu: [
                { key: "add", title: "添加", lastShow: false },
                { key: "addc", title: "添加子节点", lastShow: false },
                { key: "delete", title: "删除", lastShow: true },
                ],
            },
        }
	}
})
</script>	
~~~
  
#### treeConfigs 配置项

|  配置项   | 参数类型 |                 说明                 |
| :-------: | :------: | :----------------------------------: |
| treeData  |    []    |             树形结构数据             |
|  filter   |  boolen  |    树形结构是否支持过滤(默认支持)    |
| majorKey  |  string  | 树形节点标识字段(对应treeData中主键) |
| majorName |  string  |         树形节点显示名称字段         |
|   width   |  number  |        树形节点宽度(默认200)         |
| operation |  boolen  |  树形结构是否有操作按钮(重置,折叠)   |
| rightMenu |    []    |             右键菜单列表             |
|   data    |    {}    |             动态绑定的值             |
| parentKey |  string  |      父节点标识,默认为parentId       |



#### rightMenu.item 配置项

|  配置项  | 参数类型 |                      说明                       |
| :------: | :------: | :---------------------------------------------: |
|   key    |  string  |        右键菜单按钮标识（用于方法回调）         |
|  title   |  string  |                右键菜单按钮文本                 |
| disabled | Function | 按钮是否禁用 Function(item),item为当前节点对象  |
|  noShow  | Function | 按钮是否显示 Function(item), item为当前节点对象 |


### 方法
refresh()
操作按钮中的刷新方法
~~~js
    //需要重新调用接口获取树节点数据
    refresh(){},
~~~
change(data)
选中树节点方法
~~~js
    change(data) {
      //val为选中的树节点返回对象,拿到返回对象进行后续操作
    },
~~~
rightMenuFunction(type,data)
点击右键菜单方法
~~~ js
    rightMenuFunction(type, data) {
       //type点击菜单节点的key,根据key可以判断是点击的哪个菜单,data拿到点击菜单对象进行后续操作
    },
~~~
setSelectTreeNode(type,data)
手动设置选中树节点方法
~~~ js
      //此方法可用实现选中节点操作，参数中包含2个majorKey,majorName与treeConfigs中配置的一致,选填任意一个即可，并要保证节点唯一性
      this.$refs.stree.setSelectTreeNode({deptName:'运维部门'})
~~~